<template>
    <ManageStudentView>
        <div class="card student_list_info" style="max-height: 600px;">
            <div class="card-body">
                <div class="card student_info" v-for="student in student_list.student_list" :key="student.id">
                    <div class="card-body">
                        <span class="student_info_item"><img :src="student.photo" alt="" class="img-fluid"></span>
                        <span class="student_info_item">学号：{{ student.username }}</span>
                        <span class="student_info_item">学院：{{ student.collegename }}</span>
                        <span class="student_info_item">班级：{{ student.classname }}</span>
                        <button type="button" class="btn btn-danger" @click="delete_a_student(student.id, student.classname, student.collegename, student.username)">删除账号</button>
                        <button type="button" class="btn btn-success" @click="go_to_message(student.id)">向他留言</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="tanchuang" v-if="is_open">
            <div class="mb-3">
                <div class="info_confirm">请确认所删除学生的学院</div>
                <input type="text" class="form-control" :placeholder="delete_student_collegename" disabled>
                <div class="info_confirm">请确认所删除学生的班级</div>
                <input type="text" class="form-control" :placeholder="delete_student_classname" disabled>
                <div class="info_confirm">请确认所删除学生的学号</div>
                <input type="text" class="form-control" :placeholder="delete_student_username" disabled>
            </div>
            <div>
                <button type="button" class="btn btn-success btn-tanchuang btn-1" @click="confirm_delete_student">确定</button>
                <button type="button" class="btn btn-info btn-tanchuang btn-2" @click="close">取消</button>
            </div>
        </div>

        <div class="tanchuang" v-if="warning">
            <div class="mb-3">
                <h2>该账号为管理员，无操作权限！</h2>
            </div>
            <div>
                <button type="button" class="btn btn-success btn-tanchuang btn-1" @click="close_waring">确定</button>
                <button type="button" class="btn btn-info btn-tanchuang btn-2" @click="close_waring">取消</button>
            </div>
        </div>
    </ManageStudentView>
</template>

<script>
import ManageStudentView from '@/components/ManageStudentView.vue';
import $ from 'jquery';
import { reactive, ref } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
export default {
    name: "ManageAccountView",
    components: {
        ManageStudentView
    },
    setup() {
        const student_list = reactive({});
        const is_open = ref(false);
        const store = useStore();
        const delete_student_id = ref('');
        const delete_student_classname = ref('');
        const delete_student_collegename = ref('');
        const delete_student_username = ref('');
        const router = useRouter();
        const warning = ref(false);
        
        $.ajax({
            url: "http://47.121.28.202:8000/settings/studentlist/",
            type: "GET",
            data: {
                user_id: store.state.user.id,
            },
            headers: {
                'Authorization': "Bearer " + store.state.user.access,
            },
            success(resp) {
                student_list.count = resp.length;
                student_list.student_list = resp;
            }
        })
        
        const delete_a_student = (student_id, student_classname, student_collegename, student_username) => {
            if (student_id !== 48) {
                is_open.value = true;
                delete_student_id.value = student_id;
                delete_student_classname.value = student_classname;
                delete_student_collegename.value = student_collegename;
                delete_student_username.value = student_username;
            } else {
                warning.value = true;
            }
        }

        const confirm_delete_student = () => {
            if (store.state.user.is_login && store.state.user.is_superuser) {
                $.ajax({
                    url: "http://47.121.28.202:8000/settings/deletestudent/",
                    type: "DELETE",
                    headers: {
                        'Authorization': "Bearer " + store.state.user.access,
                    },
                    data: {
                        student_id: parseInt(delete_student_id.value),
                    },
                    success() {
                        student_list.student_list = student_list.student_list.filter(student_list => student_list.id !== parseInt(delete_student_id.value));
                        is_open.value = false;
                    }
                })
            } else {
                router.push({
                    name: 'login',
                })
            }
        }

        const go_to_message = (userid) => {
            if (store.state.user.is_login) {
                if (userid == 48) {
                    warning.value = true;
                } else {
                    router.push({
                        name: 'ordinarydialogue',
                        params: {
                            userid
                        }
                    })
                }
            } else {
                router.push({
                    name: 'login'
                })
            }
        }

        const close = () => {
            is_open.value = false;
        }

        const close_waring = () => {
            warning.value = false;
        }

        return {
            student_list,
            delete_a_student,
            is_open,
            close,
            confirm_delete_student,
            delete_student_classname,
            delete_student_collegename,
            delete_student_username,
            go_to_message,
            warning,
            close_waring
        }
    }
}
</script>

<style scoped>
    .student_info {
        margin-bottom: 10px;
    }
    .student_list_info {
        overflow-y: auto;
        border-radius: 5px;
    }
    .img-fluid {
        width: 40px;
    }
    .tanchuang {
        position: fixed;
        top: 50%; 
        left: 50%;  
        transform: translate(-50%, -50%);  
        height: 350px;  
        width: 500px;  
        background-color: rgba(211, 211, 211, 0.9);
        z-index: 1000;  
        display: flex;
        flex-direction: column;
        align-items: center; 
        justify-content: center;  
        padding: 20px;  
        box-sizing: border-box;
        border-radius: 10px;
    }
    .btn-danger {
        float: right;
        margin-left: 10px;
    }
    .student_info_item {
        margin-right: 20px;
    }
    .btn-tanchuang {
        margin: 10px;
    }
</style>